<template>
	<div class="app-container">
		<el-form
			v-show="showSearch" ref="queryRef" :inline="true" :model="queryParams">
			<el-form-item label="菜单名称" prop="menuName">
				<el-input v-model="queryParams.menuName" clearable placeholder="请输入菜单名称" style="width: 240px"
						  @clear="handleQuery()" @keyup.enter="handleQuery()" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="queryParams.status" clearable placeholder="菜单状态" style="width: 240px"
						   @change="handleQuery()">
					<el-option
						v-for="dict in sys_normal_disable"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<form-search @reset="resetQuery()" @search="handleQuery()" />
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button v-hasPermi="['system:menu:add']" icon="plus" plain size="small" type="primary"
						   @click="handleAdd">新增
				</el-button>
			</el-col>
			<el-col v-if="total === 0" :span="1.5">
				<el-button
					icon="sort"
					plain
					size="small"
					type="info"
					@click="toggleExpandAll"
				>展开/折叠
				</el-button>
			</el-col>
			<el-col v-if="!single && ids.length === 1" :span="1.5">
				<el-button
					v-if="!single"
					v-hasPermi="['system:dict:edit']"
					:disabled="single"
					icon="edit"
					plain
					size="small"
					type="success"
					@click="handleUpdate"
				>修改
				</el-button>
			</el-col>
			<el-col v-if="!multiple && ids.length >= 1" :span="1.5">
				<el-button
					v-if="!multiple"
					v-hasPermi="['system:dict:remove']"
					:disabled="multiple"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="batchDelete"
				>删除
				</el-button>
			</el-col>
			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery()" />
		</el-row>

		<el-table
			v-if="refreshTable"
			v-loading="loading"
			:data="menuList"
			:default-expand-all="isExpandAll"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			row-key="menuId"
		>
			<!-- prettier-ignore -->
			<el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="menuName" width="300" />
			<el-table-column align="center" label="图标" prop="icon" width="150">
				<template #default="scope">
					<svg-icon :icon-class="scope.row.icon" />
				</template>
			</el-table-column>
			<!-- prettier-ignore -->
			<el-table-column align="center" label="排序" prop="orderNum" width="200" />
			<!-- prettier-ignore -->
			<el-table-column :show-overflow-tooltip="true" label="权限标识" prop="perms" />
			<!-- prettier-ignore -->
			<el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" />
			<el-table-column label="状态" prop="status" width="100">
				<template #default="scope">
					<dict-tag
						:options="sys_normal_disable"
						:value="scope.row.status"
					/>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="操作"
				width="200"
			>
				<template #default="scope">
					<el-tooltip content="修改" placement="top">
						<el-button v-hasPermi="['system:menu:edit']" icon="Edit" link type="primary"
								   @click="handleUpdate(scope.row)" />
					</el-tooltip>
					<el-tooltip content="新增" placement="top">
						<el-button v-hasPermi="['system:menu:add']" icon="Plus" link type="primary"
								   @click="handleAdd(scope.row)" />
					</el-tooltip>
					<el-tooltip content="删除" placement="top">
						<el-button v-hasPermi="['system:menu:remove']" icon="Delete" link type="danger"
								   @click="handleDelete(scope.row)" />
					</el-tooltip>

				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="pageTable && total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="getPage()"
		/>

		<!-- 添加或修改菜单对话框 -->
		<el-dialog v-model="open" :title="title" append-to-body width="750px" @closed="cleanSelect()">
			<el-form
				ref="menuRef"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-row>
					<el-col :span="24">
						<el-form-item label="上级菜单">
							<!-- prettier-ignore -->
							<el-tree-select
								v-model="form.parentId"
								:data="menuOptions"
								:props="elTreeProps"
								:render-after-expand="false"
								check-strictly
								placeholder="选择上级菜单"
								value-key="menuId"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="菜单类型" prop="menuType">
							<el-radio-group v-model="form.menuType">
								<el-radio label="M">目录</el-radio>
								<el-radio label="C">菜单</el-radio>
								<el-radio label="F">按钮</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType != 'F'" :span="16">
						<el-form-item label="菜单图标" prop="icon">
							<el-popover
								v-model:visible="showChooseIcon"
								:width="560"
								placement="bottom-start"
								trigger="click"
							>
								<template #reference>
									<!-- prettier-ignore -->
									<el-input v-model="form.icon" placeholder="点击选择图标" readonly
											  @click="showSelectIcon">
										<template #prefix>
											<!-- prettier-ignore -->
											<svg-icon
												v-if="form.icon"
												:icon-class="form.icon"
												class="el-input__icon"
												style="height: 32px;width: 16px;"
											/>
											<!-- prettier-ignore -->
											<el-icon v-else style="height: 32px;width: 16px;">
												<search />
											</el-icon>
										</template>
									</el-input>
								</template>
								<!-- prettier-ignore -->
								<icon-select ref="iconSelectRef" v-click-outside="hideSelectIcon" @selected="selected"
											 @visible="showSelectIcon" />
							</el-popover>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜单名称" prop="menuName">
							<el-input
								v-model="form.menuName"
								placeholder="请输入菜单名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="显示排序" prop="orderNum">
							<el-input-number
								v-model="form.orderNum"
								:min="0"
								controls-position="right"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType != 'F'" :span="12">
						<el-form-item>
							<template #label>
								<span>
									<el-tooltip
										content="选择是外链则路由地址需要以`http(s)://`开头"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									是否外链
								</span>
							</template>
							<el-radio-group v-model="form.isFrame">
								<el-radio label="0">是</el-radio>
								<el-radio label="1">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType != 'F'" :span="12">
						<el-form-item prop="path">
							<template #label>
								<span>
									<el-tooltip
										content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									路由地址
								</span>
							</template>
							<el-input
								v-model="form.path"
								placeholder="请输入路由地址"
							/>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType == 'C'" :span="12">
						<el-form-item prop="component">
							<template #label>
								<span>
									<el-tooltip
										content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									组件路径
								</span>
							</template>
							<el-input
								v-model="form.component"
								placeholder="请输入组件路径"
							/>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType != 'M'" :span="12">
						<el-form-item>
							<el-input
								v-model="form.perms"
								maxlength="100"
								placeholder="请输入权限标识"
							/>
							<template #label>
								<span>
									<el-tooltip
										content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									权限字符
								</span>
							</template>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType == 'C'" :span="12">
						<el-form-item>
							<el-input
								v-model="form.query"
								maxlength="255"
								placeholder="请输入路由参数"
							/>
							<template #label>
								<span>
									<el-tooltip
										content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									路由参数
								</span>
							</template>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType == 'C'" :span="12">
						<el-form-item>
							<template #label>
								<span>
									<el-tooltip
										content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									是否缓存
								</span>
							</template>
							<el-radio-group v-model="form.isCache">
								<el-radio label="0">缓存</el-radio>
								<el-radio label="1">不缓存</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType != 'F'" :span="12">
						<el-form-item>
							<template #label>
								<span>
									<el-tooltip
										content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									显示状态
								</span>
							</template>
							<el-radio-group v-model="form.visible">
								<el-radio
									v-for="dict in sys_show_hide"
									:key="dict.value"
									:label="dict.value"
								>{{ dict.label }}
								</el-radio
								>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col v-if="form.menuType != 'F'" :span="12">
						<el-form-item>
							<template #label>
								<span>
									<el-tooltip
										content="选择停用则路由将不会出现在侧边栏，也不能被访问"
										placement="top"
									>
										<el-icon><question-filled /></el-icon>
									</el-tooltip>
									菜单状态
								</span>
							</template>
							<el-radio-group v-model="form.status">
								<el-radio
									v-for="dict in sys_normal_disable"
									:key="dict.value"
									:label="dict.value"
								>{{ dict.label }}
								</el-radio
								>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<!-- prettier-ignore -->
					<el-button type="primary" @click="submitForm()">确 定</el-button>
					<el-button @click="cancel()">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Menu" setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
import { ClickOutside as vClickOutside } from "element-plus";
import Menu from "@/api/request/system/menu";
// prettier-ignore
const {
	loading,
	open,
	queryRef,
	showSearch,
	title,
	menuList,
	menuOptions,
	isExpandAll,
	refreshTable,
	showChooseIcon,
	iconSelectRef,
	menuRef,
	queryParams,
	form,
	rules,
	sys_show_hide,
	sys_normal_disable,
	dateRange,
	elTreeProps,
	total,
	menuPage,
	pageTable,
	single,
	multiple,
	pageLoading,
	dateRange2,
	cancel,
	showSelectIcon,
	selected,
	handleQuery,
	resetQuery,
	handleAdd,
	toggleExpandAll,
	handleUpdate,
	submitForm,
	hideSelectIcon,
	handleDelete,
	handleSwitch,
	getPage,
	multipleSelection,
	batchDelete,
	switchIcon,
	tableSwitch,
	ids,
	pageTableRef,
	cleanSelect,
} = Menu();
</script>
<style lang="scss" scoped>
.icon-body {
	width: 100%;
	padding: 10px;

	.icon-list {
		height: 200px;
		overflow-y: scroll;

		div {
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			margin: 5px 0 -5px 10px;
			cursor: pointer;
			width: 30%;
			float: left;
		}

		span {
			display: inline-block;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	}
}
</style>
